<template>
  <a-spin :spinning="loading" size="large">
    <table class="form-table" :class="{'form-border-table': checkModel}" cellspacing="0">
      <colgroup>
        <col class="td-label"/>
        <col span="1"/>
        <col class="td-label"/>
        <col span="1"/>
        <col class="td-label"/>
        <col span="1"/>
        <col class="td-label"/>
        <col span="1"/>
      </colgroup>
      <tbody>
        <tr>
          <td :valign="valign" class="required td-label">名称：</td>
          <td colspan="7">
            <template v-if="!checkModel">
              <a-input
                v-model.trim="form.name"
                v-validate="{ required: checkRequired, length: 16}"
                name="name"
              ></a-input>
            </template>
            <template v-else>{{form.name || ''}}</template>
          </td>
        </tr>
        <tr>
          <td :valign="valign" class="required td-label">双列模式：</td>
          <td colspan="1">
            <template v-if="!checkModel">
              <a-input
                v-model.trim="form.doubleName1"
                v-validate="{ required: checkRequired, length: 16}"
                name="doubleName1"
              ></a-input>
            </template>
            <template v-else>{{form.doubleName1 || ''}}</template>
          </td>
          <td :valign="valign" class="required td-label">双列模式：</td>
          <td colspan="1">
            <template v-if="!checkModel">
              <a-input
                v-model.trim="form.doubleName2"
                v-validate="{ required: checkRequired, length: 16}"
                name="doubleName2"
              ></a-input>
            </template>
            <template v-else>{{form.doubleName2 || ''}}</template>
          </td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td :valign="valign" class="required td-label">三列模式：</td>
          <td colspan="1">
            <template v-if="!checkModel">
              <a-input
                v-model.trim="form.thirdName1"
                v-validate="{ required: checkRequired, length: 16}"
                name="thirdName1"
              ></a-input>
            </template>
            <template v-else>{{form.thirdName1 || ''}}</template>
          </td>
          <td :valign="valign" class="required td-label">三列模式：</td>
          <td colspan="1">
            <template v-if="!checkModel">
              <a-input
                v-model.trim="form.thirdName2"
                v-validate="{ required: checkRequired, length: 16}"
                name="thirdName2"
              ></a-input>
            </template>
            <template v-else>{{form.thirdName2 || ''}}</template>
          </td>
          <td :valign="valign" class="required td-label">三列模式：</td>
          <td colspan="1">
            <template v-if="!checkModel">
              <a-input
                v-model.trim="form.thirdName3"
                v-validate="{ required: checkRequired, length: 16}"
                name="thirdName3"
              ></a-input>
            </template>
            <template v-else>{{form.thirdName3 || ''}}</template>
          </td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td :valign="valign" class="required td-label">四列模式：</td>
          <td colspan="1">
            <template v-if="!checkModel">
              <a-input
                v-model.trim="form.fourName1"
                v-validate="{ required: checkRequired, length: 16}"
                name="fourName1"
              ></a-input>
            </template>
            <template v-else>{{form.fourName1 || ''}}</template>
          </td>
          <td :valign="valign" class="required td-label">四列模式：</td>
          <td colspan="1">
            <template v-if="!checkModel">
              <a-input
                v-model.trim="form.fourName2"
                v-validate="{ required: checkRequired, length: 16}"
                name="fourName2"
              ></a-input>
            </template>
            <template v-else>{{form.fourName2 || ''}}</template>
          </td>
          <td :valign="valign" class="required td-label">四列模式：</td>
          <td colspan="1">
            <template v-if="!checkModel">
              <a-input
                v-model.trim="form.fourName3"
                v-validate="{ required: checkRequired, length: 16}"
                name="fourName3"
              ></a-input>
            </template>
            <template v-else>{{form.fourName3 || ''}}</template>
          </td>
          <td :valign="valign" class="required td-label">四列模式：</td>
          <td colspan="1">
            <template v-if="!checkModel">
              <a-input
                v-model.trim="form.fourName4"
                v-validate="{ required: checkRequired, length: 16}"
                name="fourName4"
              ></a-input>
            </template>
            <template v-else>{{form.fourName4 || ''}}</template>
          </td>
        </tr>
        <tr>
          <td :valign="valign" class="required td-label">分类：</td>
          <td colspan="7">
            <template v-if="!checkModel">
              <a-select
                v-model="form.classify"
                v-validate="{ required: checkRequired }"
                name="classify"
                class="a-primordial-input"
              >
                <a-select-option
                  v-for="(item, index) in options"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                >{{ item.value }}</a-select-option>
              </a-select>
            </template>
            <template v-else>{{form.classify || ''}}</template>
          </td>
        </tr>
        <tr>
          <td :valign="valign" class="required td-label">年份：</td>
          <td colspan="7">
            <template v-if="!checkModel">
              <a-date-picker
                v-model="form.year"
                valueFormat="YYYY-MM-DD"
                allowClear
                v-validate="{ required: checkRequired }"
                name="year"
                value-format="timestamp"
                class="a-primordial-input"
              ></a-date-picker>
            </template>
            <template v-else>
              {{form.year | moment}}
            </template>
          </td>
        </tr>
        <tr>
          <td :valign="valign" class="required td-label">序号：</td>
          <td colspan="7">
            <template v-if="!checkModel">
              <a-checkbox
                v-model="form.checkbox"
                v-validate="{ required: checkRequired }"
              >备选项</a-checkbox>
              <a-input
                :value="form.checkbox"
                v-validate="{ required: checkRequired}"
                style="display: none;"
                name="checkbox"
              ></a-input>
            </template>
            <template v-else>{{form.checkbox || ''}}</template>
          </td>
        </tr>
        <tr></tr>
        <tr>
          <td :valign="valign" class="required td-label">级联选择：</td>
          <td colspan="7">
            <template v-if="!checkModel">
              <a-cascader
                :options="cascaderOptions"
                placeholder="请选择"
                class="a-primordial-input"
                @change="onChange"
              />
              <a-input
                :value="form.cascaderValue"
                v-validate="{ required: checkRequired}"
                style="display: none;"
                name="cascaderValue"
              ></a-input>
            </template>
            <template v-else>{{form.cascaderValue || ''}}</template>
          </td>
        </tr>
        <tr>
          <td :valign="valign" class="required td-label">附件：</td>
          <td colspan="7">
            <template v-if="!checkModel">
              <a-upload :showUploadList="false" :before-upload="beforeUpload" accept=".xls, .xlsx">
                <a-button type="primary">
                  选择文件
                </a-button>
              </a-upload>
              <a-input :value="form.fileList && form.fileList.length && form.fileList.length > 0 ? form.fileList.length : ''" v-validate="{ required: checkRequired}" style="display: none;" name="fileList"></a-input>
            </template>
            <ul class="file-list">
              <li v-for="item in form.fileList" :key="item.id">
                <span>
                  <span @click="downloadFile(item)">{{ item.showName }}</span>
                  <a-icon
                    v-if="!checkModel"
                    type="close-circle"
                    title="删除"
                    @click="deleteFile(item.id)"
                  />
                </span>
              </li>
            </ul>
          </td>
        </tr>
        <tr>
          <td :valign="valign" class="required td-label">备注：</td>
          <td colspan="7">
            <template v-if="!checkModel">
              <a-input
                v-model.trim="form.remark"
                v-validate="{ required: checkRequired, length: 16 }"
                type="textarea"
                :rows="3"
                name="remark"
              ></a-input>
            </template>
            <template v-else>{{form.remark || ''}}</template>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="footer">
      <a-button class="save-btn" type="primary" @click.stop="save">保存</a-button>
      <a-button class="save-btn" type="primary" @click.stop="type = type === 0 ? 1 : 0">切换显示模式</a-button>
      <a-button class="close-btn" @click.stop="closeDialog">关闭</a-button>
    </div>
  </a-spin>
</template>

<script>
import $ from "jquery";

export default {
  components: {},
  props: {
    rowData: {
      type: Object
    },
    type: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      valign: "top", // label单元格对齐方式：top/middle/bottom/baseline
      checkRequired: true, // 是否需要校验
      form: {
        fileList: [],
        cascaderValue: ""
      },
      options: [
        { value: "1", label: 1 },
        { value: "2", label: 2 },
        { value: "3", label: 3 }
      ], // 选择列表
      cascaderOptions: [
        {
          value: "zhejiang",
          label: "Zhejiang",
          children: [
            {
              value: "hangzhou",
              label: "Hangzhou",
              children: [
                {
                  value: "xihu",
                  label: "West Lake"
                }
              ]
            }
          ]
        }
      ]
    };
  },
  computed: {
    // 是否查看模式
    checkModel() {
      return this.type === 0;
    }
  },
  watch: {
    errors: {
      // 深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        $(".error-tip").remove();
        this.$nextTick(() => {
          let fields = (val && val.items) || [];
          fields.forEach(item => {
            $("[name=" + item.field + "]").after(
              `<p class="error-tip">${this.errors.collect(item.field)[0]}</p>`
            );
          });
        });
      },
      deep: true // true 深度监听
    }
  },
  // 方法集合
  methods: {
    // 保存
    save() {
      this.$validator.validateAll().then(res => {
        if (!res) {
          this.$nextTick(() => {
            $(".error-tip").remove();
            let fields = (this.errors && this.errors.items) || [];
            fields.forEach(item => {
              $("[name=" + item.field + "]").after(
                `<p class="error-tip">${this.errors.collect(item.field)[0]}</p>`
              );
            });
          });
          this.$message.error(`表单输入有误，请重新填写！！！`);
        }
        // this.loading = true
      });
    },
    // 级联change事件
    onChange(value) {
      this.form.cascaderValue = value;
    },
    // 删除相关附件
    deleteFile(id) {
      this.$confirm({
        title: MSG.IF_CONFIRM_DELETE,
        content: "",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk: () => {
          this.form.fileList = this.form.fileList.filter(item => {
            return item.id !== id;
          });
        }
      });
    },
    // 下载文件
    downloadFile(data) {
      let params = {
        fileId: data.id
      };

      this.loading = true;
      this.$downloadFile(params)
        .catch(err => {
          this.$message.error(err || `err`);
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 上传之前
    beforeUpload(file) {
      let params = {
        module: "jupcc",
        formId: this.form.id || "",
        type: "fileList",
        file: file
      };

      this.loading = true;
      this.$uploadFile(params)
        .then(res => {
          this.form.fileList = this.form.fileList.concat(res.data);
        })
        .finally(() => {
          this.loading = false;
        });

      return false;
    }
  }
};
</script>

<style>
.error-tip {
  color: red;
  font-style: italic;
  display: table-cell;
}
</style>
